<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        canvas {
            margin: 6px auto;
            border: 1px solid lawngreen;
        }
    </style>
    <title>绘制圆弧</title>
</head>

<body>
    <canvas id="canvas-1"></canvas>
    <canvas id="canvas-2"></canvas>
    <canvas id="canvas-3"></canvas>
    <canvas id="canvas-4"></canvas>

    <script>
        (function () {
            let canvas = document.getElementById('canvas-1');
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.arcTo(40, 40, 20, 100, 80, 180, 30);
            ctx.fill();
        })();
        (function () {
            let canvas = document.getElementById('canvas-2');
            let ctx = canvas.getContext('2d');
            ctx.ellipse(120, 72, 100, 32, 0, 0, 2*Math.PI);
            ctx.stroke();
        })();
        (function () {
            let canvas = document.getElementById('canvas-3');
            let ctx = canvas.getContext('2d');
            ctx.ellipse(120, 72, 100, 32, 0.2*Math.PI, 0, 1.5*Math.PI);
            ctx.fill();
        })();
        (function () {
            let canvas = document.getElementById('canvas-4');
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(72, 72, 30, 0, 2*Math.PI);
            ctx.closePath();
            ctx.stroke();
        })();
    </script>
</body>

</html>